@extends('Home/Layout/base')

@section('title', $webInformation['WEB_NAME'])

@section('content')

    @foreach ($articlesList as $article)

    <article class="am-g blog-entry-article">
        <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
            <img src="{{asset('upload'). '/' . $article['cover']}}" alt="" class="am-u-sm-12" width="400" height="200">
        </div>
        <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
            {{-- <span><a href="" class="blog-color">article &nbsp;</a></span> --}}

            @if($article['is_top'] == 1)
              <span class="am-badge am-badge-danger am-radius am-text-default">顶置</span> &nbsp; 
            @endif
            
            {{-- 作者 --}}
            <i class="am-icon-user"></i>
            <span>&nbsp; {{$article['author']}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            
            {{-- 更新时间 --}}
            <i class="am-icon-clock-o"></i>
            <span>&nbsp; {{ substr($article['updated_at'], 0, 10)}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            
            {{-- 所属分组 --}}
            <i class="am-icon-tag"></i>
            <span>&nbsp; {{ $simpleCategories[$article['category_id']] }}</span>

            {{-- 标题 --}}
            <h1 style="word-wrap:break-word; word-break:break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
              <a href="{{ url("article/") . '/' . $article['id'] }}">{{$article['title']}}</a>
            </h1>

            {{-- 描述 --}}
            <p style="word-wrap:break-word; word-break:break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3;">
              &nbsp;&nbsp;&nbsp;&nbsp;{{$article['description']}}
            </p>
            {{-- <p><a href="" class="blog-continue">continue reading</a></p> --}}
        </div>
    </article>

    @endforeach

    <ul class="am-pagination">
      <li class="am-pagination-prev"><a href="">&laquo; Prev</a></li>
      <li class="am-pagination-next"><a href="">Next &raquo;</a></li>
    </ul>
    
@endsection